<template>
		<view class="wrapper content">
			<view class="shadow-lg radius">
				<view class="height-w bg-blue">
					<image  aria-role="img" aria-label="个人头像" class="img-w" :src="users.avatar"></image>
					<view class="margin-l" v-if="users.state == '1'">
						<view class="text-white">{{users.citizenName}}</view>
						<view class="margin-t text-white">{{valid(users.citizenId)}}</view>
						<text class="cuIcon iconfont icon-yishiming text-white font-t"></text>
					</view>
					<text v-if="users.state == '0' || users.state == '-1'" class="cuIcon iconfont icon-weishiming text-white font-s"></text>
				</view>
			</view>
			<view class="cu-list menu sm-border margin-top" >
				<view aria-role="button" class="cu-item arrow" @click="naviageToPage('/pages_mine/users/regit')">
					<view class="content">
						<text class="text-black">身份认证</text>
						<view class="text-gray text-df flex">
							<view class="text-cut">完善实名认证，体验更多服务</view>
						</view>
					</view>
					<view class="radius">
						<view>{{users.state == '1'?'已实名':'立即实名'}}</view>
					</view>
				</view>
				
				<!-- <navigator class="cu-item arrow" url='/pages_mine/users/realn'>
					<view aria-role="button" style="width: -webkit-fill-available;">
						<view class="content" style="display: block;float: left;">
							<text class="text-black">人脸核对</text>
							<view class="text-gray text-df flex">
								<view class="text-cut">完善人脸核对，享受更多服务</view>
							</view>
						</view>
						<view class="radius" style="display: inline-block;float: right;line-height: 48px;">
							<view>{{users.stateId == '1'?'已实名':'立即认证'}}</view>
						</view>
					</view>
				</navigator> -->
				<view aria-role="tab" class="cu-item" >
					<view class="content">
						<text class="text-black">手机号码</text>
					</view>
					<view class="action">
						<text class="text-df">{{valid(users.phone)}}</text>
					</view>
				</view>
				
				<view aria-role="button" class="cu-item arrow" @click="naviageToPage2(sys_src + '/exthtml/careCode/index.html#/index')">
					<view class="content">
						<text class="text-black">我的二维码</text>
					</view>
					<view class="action">
						<text class='cuIcon-qrcode' style="font-size: 67upx;"></text>
					</view>
				</view>
			</view>
			<button aria-role="button" class="add-btn bg-red margin-tb-sm lg" @click="logout">退出登录</button>
		</view>
</template>

<script>
	import {  mapState } from 'vuex';
	export default {
		data() {
			return {
				users: {},
				sys_src: this.$utils.SYS_URL,
			}
		},
		onLoad() {
			this.users = uni.getStorageSync('users');
		},
		// computed: {
		// 	...mapState(['users'])
		// },
		methods: {
			valid(params) {
				if(params == null || !params){
					return '暂无'
				}
				if(params.length < 12) {
					return params.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")
				}else{
					return params.replace(/^(.{4})(?:\d+)(.{4})$/, "$1** **** ****$2")
				}
			},
			logout(){
				let that = this;
				uni.showModal({
					title: '询问',
					content: '您确定要退出吗？',
					showCancel: true,
					confirmText: '退出',
					success: (e) => {
						if (e.confirm) {
							that.$store.commit('logout')
							that.$utils.logout()
							uni.navigateTo({url: '/pages/loading'})
						}
					},
					fail: () => {},
					complete: () => {}
				})
			},
			naviageToPage(url) {
				if(url.indexOf('http') != -1){
					const newUrl = encodeURIComponent(this.$utils.setLinkUrl(url));
					uni.navigateTo({url: '/pages_serv/apps/wview?url=' + newUrl});
				} else {
					uni.navigateTo({url: url})
				}
			},
			naviageToPage2(url) {
				if(this.users.stateId != '1'){
					uni.showModal({
						title: '提示',
						content: '本次操作需要您进行实名登录验证',
						showCancel: true,
						confirmText: '确定',
						success: (e) => {
							if (e.confirm) {
								uni.navigateTo({url: '/pages_mine/users/regit'});
							}
						}
					})
				} else {
					if(url.indexOf('https') != -1){
						const newUrl = encodeURIComponent(this.$utils.setLinkUrl(url));
						uni.navigateTo({url: '/pages_serv/apps/wview?url=' + newUrl});
					} else {
						uni.navigateTo({url: url})
					}
				}
			},
		}
	}
</script>

<style lang='scss'>
	page {
		padding-bottom: 120upx;
		background: #fff;
	}
	.content {
		position: relative;
	}
	.wrapper {
		display: flex;
		flex-direction: column;
		flex: 1;
		
	}
	.padding-s {
		padding: 30rpx;
	}
	.height-w {
		height:300upx;
		margin: 30rpx;
		border-radius: 18rpx;
	}
	.font-t {
		font-size: 93px;
		color: white;
		opacity: 0.4;
		float: right;
		padding-right: 32px;
		margin-top: -126upx;
	}
	.font-s {
		font-size: 93px;
		color: white;
		opacity: 0.4;
		float: right;
		padding-right: 32px;
		margin-top: 50upx;
	}
	
	.img-w {
		width: 115upx;
		height: 115upx;
		left: 35upx;
		top: 85upx;
	}
	.margin-l {
		margin-left: 165upx;
		margin-top: -20upx;
		font-size: 30upx;
	}
	.margin-t {
		margin-top: 16upx;
	}
	
	.cu-list.menu>.cu-item {
	    min-height: 75px;
	}
	.add-btn {
		position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 16upx;
		z-index: 95;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		font-size: 32upx;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px;
	}
</style>
